<!--
 * @Description: 异常日志
 * @Author: 杨帆
-->
<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="handleReset">
      <x-filter-item :label="$t('maintain.logError.module')">
        <el-input
          v-model="searchParams.module"
          clearable
          :placeholder="$t('maintain.logError.modulePlaceholder')"
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('maintain.logError.requestUri')">
        <el-input
          v-model="searchParams.requestUri"
          clearable
          :placeholder="$t('maintain.logError.requestUriPlaceholder')"
        ></el-input>
      </x-filter-item>
    </x-filter>
    <!--数据面板-->
    <x-data>
      <!--数据面板按钮插糟-->
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="20">
            <el-button
              type="primary"
              v-hasPermi="['upms:loginLog:export']"
              :icon="buttonIcons('export')"
              @click="handleExport(exportUrl)"
            >
              {{ $t('common.export') }}
            </el-button>
          </el-col>
          <el-col :span="4" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <!-- 数据表格 -->
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <el-switch
              v-if="item.prop === 'state'"
              :value="scope.row[item.prop]"
              active-color="#4474F6"
              inactive-color="#A5A9B2"
              :active-value="1"
              :inactive-value="0"
              :disabled="true"
            >
            </el-switch>
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions :action-list="actions" :row="scope.row" @onActionClick="handleActions" />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
    <log-error-dialog ref="logErrorDetail"></log-error-dialog>
  </x-page>
</template>
<script>
  // import { TableListMixin } from '@/common/mixins/index.js'
  import { selectDictLabel, buttonIcons, TableListMixin } from '@package/utils'
  import { actions, columns } from '../config/logError.js'
  import { exportUrl, listUrl } from '../api/logError.js'
  import LogErrorDialog from '../components/logErrorDialog.vue'

  export default {
    name: 'LogError',
    components: { LogErrorDialog },
    mixins: [TableListMixin],
    data() {
      return {
        columns,
        listUrl,
        exportUrl,
        actions,
        searchParams: {
          module: '',
          requestUri: ''
        },
        statusOptions: [],
        tableColumns: [],
        tableData: [],
        pagination: {
          pageSize: 10,
          pageNum: 1
        },
        selectionData: []
      }
    },
    methods: {
      buttonIcons,
      selectDictLabel,
      handleSearch(val) {
        this.queryParam = { ...this.searchParams, ...val }
        this.loadData()
      },
      /**
       * 重置查询
       *
       */
      handleReset() {
        this.searchParams = {
          module: '',
          requestUri: ''
        }
        this.resetSearch()
      },
      /**
       * 列表选中数据
       *
       */
      handleSelectionChange(data) {
        this.selectionData = data
      },
      handleActions({ key, data }) {
        switch (key) {
          case 'detail':
            this.$refs.logErrorDetail.handleOpen(data)
            break
          default:
            break
        }
      }
    }
  }
</script>
<style>
  .el-tooltip__popper {
    max-width: 60%;
  }
</style>
